import { AbsoluteFill, Sequence, useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";

// 开场动画组件
const OpeningAnimation = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const scale = spring({
    frame,
    fps,
    config: {
      damping: 8,
      stiffness: 100,
    },
  });
  
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  
  return (
    <AbsoluteFill className="bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center">
      <div 
        style={{ 
          transform: `scale(${scale})`, 
          opacity 
        }}
        className="text-white text-center"
      >
        <h1 className="text-6xl font-bold mb-4">产品名称</h1>
        <p className="text-2xl font-light">创新解决方案</p>
      </div>
    </AbsoluteFill>
  );
};

// 功能展示组件
const FeatureSection = ({ title, description, icon }: { title: string; description: string; icon: string }) => {
  const frame = useCurrentFrame();
  
  const slideIn = interpolate(frame, [0, 30], [-100, 0], {
    extrapolateRight: "clamp",
  });
  
  const fadeIn = interpolate(frame, [15, 45], [0, 1], {
    extrapolateRight: "clamp",
  });
  
  return (
    <AbsoluteFill className="bg-white flex items-center justify-center">
      <div className="max-w-4xl mx-auto px-8 flex items-center gap-12">
        <div 
          style={{ transform: `translateX(${slideIn}px)` }}
          className="text-8xl"
        >
          {icon}
        </div>
        <div style={{ opacity: fadeIn }}>
          <h2 className="text-4xl font-bold text-blue-800 mb-4">{title}</h2>
          <p className="text-xl text-gray-600 leading-relaxed">{description}</p>
        </div>
      </div>
    </AbsoluteFill>
  );
};

// CTA组件
const CallToAction = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  
  const buttonScale = spring({
    frame: frame - 60,
    fps,
    config: {
      damping: 10,
      stiffness: 200,
    },
  });
  
  const pulseScale = 1 + Math.sin(frame * 0.2) * 0.05;
  
  return (
    <AbsoluteFill className="bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center">
      <div className="text-white text-center">
        <h2 className="text-5xl font-bold mb-6">立即体验</h2>
        <p className="text-xl mb-8">开启您的数字化转型之旅</p>
        <div 
          style={{ transform: `scale(${buttonScale * pulseScale})` }}
          className="bg-white text-blue-800 px-12 py-4 rounded-full text-2xl font-bold inline-block shadow-2xl"
        >
          免费试用
        </div>
      </div>
    </AbsoluteFill>
  );
};

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      {/* 开场动画 0-5秒 */}
      <Sequence from={0} durationInFrames={150}>
        <OpeningAnimation />
      </Sequence>
      
      {/* 功能1 5-20秒 */}
      <Sequence from={150} durationInFrames={450}>
        <FeatureSection 
          title="智能分析"
          description="基于AI的数据分析，为您的业务决策提供精准洞察和预测建议。"
          icon="🧠"
        />
      </Sequence>
      
      {/* 功能2 20-35秒 */}
      <Sequence from={600} durationInFrames={450}>
        <FeatureSection 
          title="自动化流程"
          description="简化复杂工作流程，提高团队效率，让您专注于核心业务发展。"
          icon="⚡"
        />
      </Sequence>
      
      {/* 功能3 35-50秒 */}
      <Sequence from={1050} durationInFrames={450}>
        <FeatureSection 
          title="实时协作"
          description="跨平台团队协作工具，实时同步数据，让团队保持高效沟通。"
          icon="🤝"
        />
      </Sequence>
      
      {/* CTA 50-60秒 */}
      <Sequence from={1500} durationInFrames={300}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};
